<template>
    <div class="txt-input border-bottom-1px" :class="{sw:type=='switch'}">
        <span class="label">{{label}}</span>

        <switch-btn v-if="type=='switch'" :value="value" :disabled="disabled" @input="input"></switch-btn>
        <input ref="inp" @keyup="keyUp" @change="change" v-else :disabled="disabled" :value="value" :placeHolder="placeHolder"
               class="inp" :type="inputType">
        <div @click="clickCode" class="code-btn" v-if="type=='code'">
                <span class="second" v-if="second>0">{{second}}s</span>
                <span class="second" v-else >获取</span>
        </div>
    </div>
</template>

<script>
    import switchBtn from '@/components/base/switch-btn'
    import {clearNoNumWithInt} from "@/common/js/num.js"

    export default {
        props: {
            label: String,
            placeHolder: String,
            value: null,
            disabled: null,
            type: String
        },
        data() {
            return {
                second:0
            }
        },
        computed:{
            inputType(){
               if(!this.type){
                   return "text"
               }
               if(this.type==='code'){
                   return 'number'
               }

               return 'text'
            }
        },
        methods: {
            clickCode(){
                if(this.second>0){
                    return
                }
                this.second = 60
                if(this.inte){
                    clearInterval(this.inte)
                }
                this.inte = setInterval( ()=> {
                    if(this.second>0){
                        this.second  = this.second-1
                    }else {
                        clearInterval(this.inte)
                    }
                },1000)
                this.$emit('clickCode')
            },
            keyUp(e) {
                if (this.type !== "number") {
                    this.$emit("input", this.$refs.inp.value)
                }
            },
            change(e){
                if (this.type === 'number') {
                    this.$refs.inp.value = clearNoNumWithInt(this.$refs.inp.value)
                }
                this.$emit("input", this.$refs.inp.value)
            },
            input(e) {
                this.$emit("input", e)
            }
        },
        components: {
            switchBtn
        },
        watch: {
            // tempValue() {
            //     // this.$emit("input", this.tempValue)
            // }
        }
    }
</script>

<style scoped lang="stylus">
    .txt-input
        border-color #DCDCDC
        height 50px
        background-color white
        display flex
        align-items center
        padding 0 15px
        display flex

        &.sw
            justify-content space-between

        .label
            flex 0 0 80px
            font-weight 300
            font-size 14px
            color #6F6F6F
            margin-right 25px

        .inp
            flex 1
            outline none
            border none
            padding-left 10px
            font-weight 300
            color #A1A1A1
            font-size 14px
        .code-btn
            flex 0 0 30px
            font-size 12px
            color red


</style>
